<template>
  <div>
    <!-- 定义面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>科室挂号</el-breadcrumb-item>

    </el-breadcrumb>

    <!-- 定义卡片视图 -->
   <el-card class="box-card">

      <!-- 定义页面提示信息 -->
     <el-alert title="挂号流程" type="info" effect="dark" center show-icon :closable="false"></el-alert>

      <!-- 定义标签页 before-leave:切换标签之前的钩子，若返回 false 或者返回 Promise 且被 reject，则阻止切换。 -->
      <el-form :model="addItemForm" :rules="rules" ref="addItemFormRef" label-width="100px"
        label-position="top">
        <el-tabs v-model="activeIndex" :tab-position="'left'" >
          <el-tab-pane label="基本信息" name="0">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="addItemForm.username" ></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <el-select v-model="addItemForm.sex" placeholder="性别">
                <el-option label="男" value="男"></el-option>
                <el-option label="女" value="女"></el-option>
              </el-select>
            </el-form-item>
			<el-form-item label="年龄:" prop="age">
			  <el-input type="number" placeholder="年龄" v-model="addItemForm.age"  :min="0" :max="150"></el-input>
			</el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="addItemForm.phone" type="number"></el-input>
            </el-form-item>
            <el-form-item label="症状描述" prop="conditions">
              <el-input v-model="addItemForm.conditions" type="test"></el-input>
            </el-form-item>
      <el-form-item label="科室:" prop="hospital"  >
      <el-cascader ref="refSubCat" v-model="selectedKeys" :props="props" :options="parentHospitalList"
        @change="parentHospitalChange" :show-all-levels="false"></el-cascader>
       </el-form-item>
       <el-form-item label="医生:" prop="doctors">
         <template slot-scope="scope">
         <el-select v-model="addItemForm.doctors" clearable placeholder="请先选择科室" @click.native="getDoctor()">
             <el-option
               v-for="item in DoctorList"
               :key="item.name"
               :label="item.name"
               :value="item.name"
               >
             </el-option>
           </el-select>
           </template>
       </el-form-item>

            <el-button type="primary" class="addItemBtnClass" @click="addItemBtn()">挂号提交申请</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>

    </el-card>

  </div>
</template>

 <script>
  export default {
    data() {
      const checkAge = (rule,value,callback) => {
        const ageRege = /^(?:[1-9][0-9]?|1[01][0-9]|150)$/
        if (ageRege.test (value)) {
          return callback()
        }
        callback(new Error('请填写正确的年龄'))
      }
      return {
        value: [],
         DoctorList:[],
        selectedKeys:[],
        activeIndex: '0',
        addItemForm: { },
        itemDesc: {
          itemDesc: ""
        },
        itemParam: {
          dynamicArray: [],
          staticArray: [],
          dynamicArgs: "",
          staticArgs: ""
        },
        props: {
          //定义子节点菜单展开方式
          expandTrigger: "click",
          value: "id", //选中数据的value值
          label: "name", //选中数据展现名称
          children: "children", //自选项数据

          // checkStrictly: true
        },
        parentHospitalList: [],
        rules: {
          username: [{
            required: true,
            message: '请输入您的姓名',
            trigger: 'blur'
          }],
          sex: [{
            required: true,
            message: '请输入您的性别',
            trigger: 'blur'
          }],
		  age: [{
		    required: true,
		    message: '请描述您的症状',
		    trigger: 'blur'
		  },
      { validator: checkAge , trigger: 'blur' }],
          phone: [{
            required: true,
            message: '请输入您的手机号',
            trigger: 'blur'
          }],
          conditions: [{
            required: true,
            message: '请描述您的症状',
            trigger: 'blur'
          }],

        },
        itemCatIds: [],
        itemCatList: [],
        props: {
          expandTrigger: 'hover',
          value: "id", //选中数据的value值
          label: "name", //选中数据展现名称
          children: "children", //自选项数据
        },
        //设置商品动态参数
        dynamicTableData: [],
        staticTableData: [],

        //定义文件上传路径地址
        // uploadUrl: "http://localhost:8091/file/upload",
        uploadUrl: "http://manage.jt.com/file/upload",
        //定义图片网络访问地址
        imageUrlPath: "",
        //定义图片控制开关
        dialogImageVisible: false
      }
    },

    methods: {
      parentHospitalChange() {
        this.addItemForm.hospital = this.$refs["refSubCat"].getCheckedNodes()[0].label
        // this.itemPatientForm.hospital = this.$refs["refSubCat"].getCheckedNodes()[0].label
      },
      addItemBtn(){
        this.$refs.addItemFormRef.validate(async valid => {
           if(!valid)  return this.$message.error("表单验证没有通过")
        console.log(this.addItemForm)
        let {data: result} = await this.$http.post("/patient/addPatient",this.addItemForm)
        if(result.status !== 200) return this.$message.error("挂号申请添加失败")
        this.$message.success("挂号申请添加成功")

        //2.5添加完成之后,将数据重定向到商品展现页面
        this.$router.push("/patient")
        })
      },
      async getHospitalList(){
        const {data:result} = await this.$http.get(`/hospital/findHospitalList/3`)
        if (result.status !== 200) return this.$message.error("获取科室列表失败!!")
        this.parentHospitalList = result.data
      },
      async getDoctor(){
        const {data:result} = await this.$http.get(`/doctors/findDoctorList/${this.addItemForm.hospital}`)
        if (result.status !== 200) return this.$message.error("获取医生列表失败!!")
        this.DoctorList = result.data
      },
    },
    mounted(){
      this.getHospitalList()
    }
  }
 </script>

<style lang="less" scoped>
  .el-steps {
    margin: 20px 0;
  }

  .el-cascader {
    width: 30%;
  }

  /* 控制复选框的右边距5像素 !important 表示优先执行 IE6不兼容*/
  .el-checkbox {
    margin: 0 10px 0 0 !important;
  }
  .addItemBtnClass{

    margin-top: 15px;
  }

</style>
